<template>
	<view class="data-card">
		<view class="summary">
			<view class="row">
				<text class="row-text">总收费100%：</text>
				<text class="row-text">{{ calculateTotal('amountReceived') }}</text>
			</view>
			<view class="row">
				<text class="row-text">总预结40%：</text>
				<text class="row-text">{{ calculateTotal('projectedAmount') }}</text>
			</view>
			<view class="row">
				<text class="row-text">总收入60%：</text>
				<text class="row-text">{{ calculateTotal('netIncome') }}</text>
			</view>
		</view>

		<view class="list">
			<view class="list-item" v-for="(item, index) in displayedItems" :key="index">
				<view class="list-item-content">
					<view class="row">
						<text class="row-text">{{ attributeMap.installDate }}：</text>
						<text class="row-text">{{ item.installDate }}</text>
					</view>
					<view class="row">
						<text class="row-text">{{ attributeMap.buildingNo }}：</text>
						<text class="row-text">{{ item.buildingNo }}</text>
					</view>
					<view class="row">
						<text class="row-text">{{ attributeMap.address }}：</text>
						<text class="row-text">{{ item.address }}</text>
					</view>
				</view>
				<view class="expandable-content" :class="[{ expanded: item.expanded }]">
					<view class="row">
						<text class="row-text">{{ attributeMap.dailyFee }}：</text>
						<text class="row-text">{{ item.dailyFee }}</text>
					</view>
					<view class="row">
						<text class="row-text">{{ attributeMap.monthlyPackage }}：</text>
						<text class="row-text">{{ item.monthlyPackage }}</text>
					</view>
					<view class="row">
						<text class="row-text">{{ attributeMap.bandwidth }}：</text>
						<text class="row-text">{{ item.bandwidth }}</text>
					</view>
					<view class="row">
						<text class="row-text">{{ attributeMap.activationFee }}：</text>
						<text class="row-text">{{ item.activationFee }}</text>
					</view>
					<view class="row">
						<text class="row-text">{{ attributeMap.amountReceived }}：</text>
						<text class="row-text">{{ item.amountReceived }}</text>
					</view>
					<view class="row">
						<text class="row-text">{{ attributeMap.projectedAmount }}：</text>
						<text class="row-text">{{ item.projectedAmount }}</text>
					</view>
					<view class="row">
						<text class="row-text">{{ attributeMap.netIncome }}：</text>
						<text class="row-text">{{ item.netIncome }}</text>
					</view>
					<view class="row">
						<text class="row-text">{{ attributeMap.expirationDate }}：</text>
						<text class="row-text">{{ item.expirationDate }}</text>
					</view>
					<view class="row">
						<text class="row-text">{{ attributeMap.remarks }}：</text>
						<text class="row-text">{{ item.remarks }}</text>
					</view>
				</view>
				<view class="list-item-action">
					<button @click="toggleExpand(item)">
						<text class="btn-text">{{ item.expanded ? '收起' : '展开' }}</text>
					</button>
					<button @click="editItem(index)">
						<text class="btn-text">编辑</text>
					</button>
					<button @click="deleteItem(index)">
						<text class="btn-text">删除</text>
					</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			data: {
				type: Array,
				default: () => [],
			},
			itemsPerPage: {
				type: Number,
				default: 10,
			},
		},
		data() {
			return {
				currentPage: 1,
			};
		},
		computed: {
			displayedItems() {
				return this.data.map(item => {
					this.$set(item, 'expanded', false);
					const {
						dailyFee,
						monthlyPackage,
						activationFee
					} = item;
					const amountReceived = (dailyFee + monthlyPackage + activationFee).toFixed(2);
					this.$set(item, 'amountReceived', amountReceived);
					this.$set(item, 'projectedAmount', (amountReceived * 0.4).toFixed(2));
					this.$set(item, 'netIncome', (amountReceived * 0.6).toFixed(2));
					this.$set(item, 'expanded', false);
					return item
				});
			},

			attributeMap() {
				return {
					installDate: "安装日期",
					buildingNo: "栋号",
					address: "地址",
					dailyFee: "按天收费",
					monthlyPackage: "套餐（月）",
					bandwidth: "兆数",
					activationFee: "激活费用",
					amountReceived: "已收金额",
					projectedAmount: "预结金额",
					netIncome: "净收入",
					expirationDate: "到期日期",
					remarks: "备注",
				};
			},
		},
		methods: {
			calculateTotal(name) {
				let total = 0;
				for (const item of this.displayedItems) {
					total += parseFloat(item[name]);
				}
				return total.toFixed(2) + "￥";
			},
			toggleExpand(item) {
				item.expanded = !item.expanded;
			},
			editItem(index) {
				const item = this.displayedItems[index];
				// 在此处执行编辑逻辑
				console.log("编辑", item);
			},
			deleteItem(index) {
				const item = this.displayedItems[index];
				// 在此处执行删除逻辑
				console.log("删除", item);
			},
		}
	}
</script>

<style>
	.summary {
		margin-top: 1rem;
		padding: 1rem;
		background-color: #f5f5f5;
	}

	.row {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0.5rem 0;
		border-bottom: 1px solid #eee;
	}

	.row .row-text {
		font-size: 1rem;
	}

	.list {
		margin-top: 1rem;
	}

	.list-item {
		box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
		border-radius: 8px;
		overflow: hidden;
		transition: all 0.2s ease-in-out;
		margin-bottom: 1rem;
	}

	.list-item:hover {
		box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
		transform: translateY(-2px);
	}

	.list-item-content {
		padding: 1rem;
		background-color: #fff;
	}

	.list-item-action {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		padding: 1rem;
		background-color: #f5f5f5;
	}

	.list-item-action button {
		font-size: 1rem;
		color: #fff;
		border: none;
		border-radius: 4px;
		padding: 0.5rem 1rem;
		cursor: pointer;
		transition: all 0.2s ease-in-out;
		background-color: #007bff;
	}

	.list-item-action button:last-child {
		background-color: #dc3545;
	}

	.list-item-action button:hover {
		background-color: #006fe6;
		transform: scale(1.05);
	}

	.btn-text {
		font-size: 1rem;
		color: #fff;
	}

	.expandable-content {
		padding: 0 1rem;
		background-color: #f5f5f5;
		overflow: hidden;
		max-height: 0;
		transition: all .5s ease-in-out;
	}


	.expandable-content.expanded {
		max-height: 100rem;
	}
</style>